{{#>base title=data.page.datepicker}}

    {{#*inline "pageContent"}}
        <div class="page-content">

            <div class="row">
                <div class="col-md-12">
                    <h3 class="page-title">
                        {{data.page.datepicker}}
                    </h3>

                    <div class="tabs-wrap">
                        <ul  class="nav nav-tabs">
                            <li class="active">
                                <a href="datepicker.html" >日期</a>
                            </li>
                            <li >
                                <a href="daterangepicker.html" >日期范围</a>
                            </li>
                            <li>
                                <a href="datetimepicker.html" >时间</a>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>

            <div class="row">
                <div class="col-md-12">

                    <!-- BEGIN PORTLET-->
                    <div class="portlet box default">
                        <div class="portlet-body form">
                            <form action="#" class="form-horizontal form-bordered">
                                <div class="form-body">

                                    <div class="form-group">
                                        <label class="control-label col-md-3">默认</label>
                                        <div class="col-md-3">
                                            <input id="picker1" class="form-control form-control-inline input-medium date-picker" size="16" type="text" value=""/>

                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3">带图标</label>
                                        <div class="col-md-3">
                                            <div id="picker2" class="input-group input-medium date date-picker"  data-date-start-date="+0d">
                                                <input type="text" class="form-control" readonly>
                                                        <span class="input-group-btn">
                                                            <button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
                                                        </span>
                                            </div>

                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <label class="control-label col-md-3">日期范围</label>
                                        <div class="col-md-4">
                                            <div id="picker3" class="input-group input-large date-picker input-daterange" >
                                                <input type="text" class="form-control" name="from">
                                                <span class="input-group-addon">to</span>
                                                <input type="text" class="form-control" name="to">
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </form>

                        </div>
                    </div>
                    <!-- END PORTLET-->

                </div>
            </div>

            <div class="row">
                <div class="col-md-12">


                    <div class="markdown">




                        <h3>HTML代码</h3>
<pre><code class="html">&lt;!--默认--&gt;
&lt;input id=&quot;picker1&quot; class=&quot;form-control form-control-inline input-medium date-picker&quot; size=&quot;16&quot; type=&quot;text&quot; value=&quot;&quot;/&gt;

&lt;!--带图标--&gt;
&lt;div id=&quot;picker2&quot; class=&quot;input-group input-medium date date-picker&quot;&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; readonly&gt;
    &lt;span class=&quot;input-group-btn&quot;&gt;
        &lt;button class=&quot;btn default&quot; type=&quot;button&quot;&gt;&lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;/span&gt;
&lt;/div&gt;

&lt;!--时间范围--&gt;
&lt;div id=&quot;picker3&quot; class=&quot;input-group input-large date-picker input-daterange&quot;&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;from&quot;&gt;
    &lt;span class=&quot;input-group-addon&quot;&gt;to&lt;/span&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;to&quot;&gt;
&lt;/div&gt;</code></pre>
                        <h3>Javascript代码</h3>
<pre><code class="javascript">$p.datePicker('#picker1', {
    defaultDate: moment(),
}, function(date) {
    $p.alert(date);
});

$p.datePicker('#picker2', {
    defaultDate: moment(),
}, function(date) {
    $p.alert(date);
});

$p.datePicker('#picker3', {
    defaultDate: [moment().subtract('days', 6), moment()],
}, function(date) {
    $p.alert(date);
});</code></pre>


                        <h3>更多实例</h3>
                        <a href="http://bootstrap-datepicker.readthedocs.org/en/latest/index.html" target="_blank">http://bootstrap-datepicker.readthedocs.org/en/latest/index.html</a>
                    </div>



                </div>
            </div>
        </div>
    {{/inline}}

    {{#*inline "appScript"}}
        <script type="text/javascript">
            pagurian.call("modules/datepicker/app", function(app) {
                app.page.date();
            });
        </script>
    {{/inline}}

{{/base}}
